<template>
	<m-layout class="layout-box" title="消息列表">
		<m-block class="" slot="header" gap="10 0 10 20">
			<mtab :tabList='tabList' :tabIdx='sended' @change="sended = $event" />
		</m-block>
		<m-block class="list_box" :isLoading="isLoading" gap="30">
			<view v-for="(item,index) in listArr" :key="index">
				<view class="list_item flex" @click="goDialogue(item)">
					<view>
						<m-image size="80" radius="200" :src="item.toUserHeadpic" types="user" />
					</view>
					<view class="flex-1 pl-16">
						<view class="flex-between">
							<view class="item_title otw">{{item.fromnickname}}</view>
							<text class="fs26">{{item.lasttime.replace("T"," ")}}</text>
						</view>
						<view class="flex-between mt-12">
							<view v-if="item['lastmsg']">
								<text v-if="item['lastmsg']=='[商品]'">[商品]</text>
								<text
									v-else-if="item['lastmsg']=='[图片]'||checkImageType(JSON.parse(item['lastmsg'])['content'])">[图片]</text>
								<text v-else class="otw"
									style="width:300rpx;display: block;">{{JSON.parse(item['lastmsg'])['content']}}</text>
							</view>
							<view class="right">
								<view v-if="item.unreadcount > 0" class="point flex jc-center fs21" style="color:#fff">
									{{item.unreadcount}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<m-loading class="more pb-60" gap="100 0" :list='listArr' :pageIndex="pageIndex" :pageCount="pageCount"
				:loading="isLoading" title="暂无数据" />
		</m-block>
	</m-layout>
</template>

<script>
	import { getmsgtitle } from "@/api/msg.js"
	export default {
		data() {
			return {
				labelList: [],
				noticeNewMsg: false, // 是否有公告新信息
				loadStatus: 'more', // more:加载前的状态，loading:加载中的状态，nomore:没有更多的状态
				likeWords: "", // 查询关键字，空值查询全部
				typeCode: "", // 消息类型
				// add
				isLoading: false,
				listArr: [],
				pageIndex: 1,
				pageSize: 10,
				pageCount: 0,
                sended:0,  //  0全部 1已回复 2待回复
				tabList: [{
						title: '全部',
						idx: 0
					},
					{
						title: '已回复',
						idx: 1
					},
					{
						title: '待回复',
						idx: 2
					},
				],
			};
		},
		watch: {
			sended: {
				handler(newVal, oldVal) {
					this.init()
				},
				immediate: true
			}
		},
		onLoad() {
			this.Ws.init();
		},
		onShow() {
			// this.init();
			// this.Ws.reconnect();
			// this.GetMessageTypeList();
			// this.UnreadSystemNoticeList(); // 未读系统公告
		},
		// 销毁或离开页面  清空所有消息
		beforeDestroy() {
			this.Ws.completeClose();
			// this.CLEAR_CAPTAIN();
		},
		onUnload() {
			this.Ws.completeClose();
			// this.CLEAR_CAPTAIN();
		},
		methods: {
			checkImageType(fileName) {
				var pattern = /(\.jpg|\.jpeg|\.png|\.gif)$/i;
				return pattern.test(fileName);
			},
			// 初始化数据
			init() {
				this.isLoading = true;
				this.pageCount = 1;
				this.pageIndex = 1;
				this.getData();
			},
			async getData() {
				if (this.pageIndex > this.pageCount) {
					return;
				}
				const { success, list, pageCount } = await getmsgtitle({
					sended:this.sended,
					pageSize: this.pageSize,
					pageIndex: this.pageIndex
				});
				this.isLoading = false;
				this.pageCount = pageCount;
				if (this.pageIndex <= 1) {
					this.listArr = list;
				} else {
					this.listArr = [...this.listArr, ...list];
				}
				if (!list || list.length == 0) return
				let totalAcount = 0;
				this.listArr.forEach(item => {
					totalAcount += Number(item.unreadcount);
				})
				this.$store.commit('user/SET_UNREAD', totalAcount);
				this.pageIndex++;
				uni.stopPullDownRefresh();
			},
			// 点击 列表 进入聊天页面
			goDialogue(item) {
				this.openURL({ openUrl: 'https://work.weixin.qq.com/kfid/kfcfc1ed477fc398781' })
				// this.Jump({
				// 	url: '/pages/chat/chat',
				// 	// url:'/page_chat/chat/chat',
				// 	params: {
				// 		touid: item.fromuid,
				// 		touserName: item.fromnickname
				// 	}
				// })
			},
		},
		onPullDownRefresh() {
			this.init();
		},
		onReachBottom() {
			this.getData();
			console.log("触底了");
		},
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #FFFFFF;
	}

	.layout-box {
		padding-bottom: 160rpx;
		// background: url('../../static/images/icon/msg_img.png') no-repeat;
		background-size: 100% 300rpx;

		.label_v {
			box-shadow: 0px 0px 10rpx 1rpx rgba(250, 46, 74, 0.14);
		}

		.list_box {
			background-color: #FFFFFF;
			padding: 0 24rpx;
			margin-top: 20rpx;

			.list_item {
				padding: 29rpx 0;
				font-size: 24rpx;
				color: $uni-text-color-grey;
				border-bottom: 4rpx solid #F5F5F5;

				.item_title {
					flex: 1;
					font-size: 28rpx;
					font-weight: 400;
					color: $uni-text-color;
				}

				.right {
					width: 80rpx;
					display: flex;
					align-items: center;
					justify-content: flex-end;
				}
			}
		}

		.point {
			width: 36rpx;
			height: 36rpx;
			background-color: #FA2B47;
			border-radius: 50%;
		}

		.position {
			position: absolute;
			top: 0;
			right: 0;
			margin-right: 10rpx;
		}
	}
</style>